html{
    /* 占击导航栏的时候，让页面平稳向下移动的动画效果 ,ie 10 以上才支持 */
    scroll-behavior: smooth;
}
/* utility classes 实用通用类 */
.text-primary {
    /* 设置图标书的颜色 */
  color: #93cb52;
}
.text-center{
    text-align: center;
 }
.bg-dark{
    /* 设置背景颜色 */
    background-color: #333;
    color: #fff;
}
.bg-primary{
    /* 设置背景颜色 */
    background-color: #93cb52;
    /* 设置文字颜色 */
    color: #000000;
}
.btn-dark{
    /* 设置按钮的样式 */
    background-color: #333;
    color: #fff;
  
}
.l-heading{
    font-size: 4rem;
    margin-bottom: 0.75rem ;
    /* 1.1 就是字体的行高 */
    line-height: 1.1;
}
.m-heading{
    font-size: 2rem;
    margin: 0.75rem ;
    /* 1.1 就是字体的行高 */
    line-height: 1.1;
}
.btn{
    /* 使按钮可以显示为行内块元素 */
    display: inline;
    color: #fff;
    background-color: #93cb52;
    padding: 0.5rem 2rem;
    border: none;
    border-radius: 5px;
}
.btn:hover{
    background-color: #7db93e;
}

/* navbar */
.navbar{
    /* 设置导航栏的样式 */
    display: flex;
    /* 让导航栏两端对齐 */
    justify-content: space-between;
    /* 让导航栏内容居中 */
    /* align-items: center; */
    /* 设置导航栏的内边距 */
    /* padding: 10px 20px; */
    background-color: #333;
    color: #fff;
    /* 这里用的粘性定位， sticky 加上top=0，就是固定在顶部，但会随着页面的
    滚动而跟着滚动，但是这种在安卓手机端的兼容性不好*/
    position: sticky;
    top: 0;
    /* 设置导航栏的层级 */
    z-index: 1;
    /* 给导航栏加上内边距 */
    padding: 1rem;
}
.navbar ul{
    display: flex;
    color: #fff;
    /* list-style: none; 在reset.css里面已经设置了默认的列表样式，这里可以去掉 */
    align-items: center;
}
.navbar ul a{
    color: #ffffff;
    /* 给a标签加上内边距，加上这个a标签之间就已经有很大的距离了 */
    padding: 0.75rem;
    /* 给a标签加上外边距 ，加上后变化不大*/
    margin: 0 0.25rem;
}

.navbar ul a:hover{
    background-color: #93cb52;
    border-radius: 5px;
}

/* 这里是home页面的样式 */
#home{
    /* 设置背景颜色 */
    background: url("../img/home0.jpg") no-repeat center center/ cover;
    
    height: 100vh;
   color: #fff;
   position: relative;
}
#home .home-content{
    /* 设置内容的布局 */
    display: flex;
    /* 默认是row在水平方向，这里设置为column，就是垂直方向 */
    flex-direction: column;
    /* 让内容在主轴上居中，也就是垂直方向 */
    justify-content: center;
    /* 上面的没有设置高度，所以上面的代码没有生效， 这里设置一下高度，可以注释掉上面的代码对比一下 */
    height: 100%;
    /* 让内容在交叉轴上居中，也就是水平方向 */
    align-items: center;
    padding: 0 2rem;
    /* 子绝父相，所有这里用absolute，父元素设置position:relative,不然子元素的位置是相对有定位的父元素的或body了 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* 在图片上方加了一层半透明的背景，灰色，这样让文字看起来更加突出 */
    background-color: rgba(0,0,0,0.3);
}

/* what */
#what{
    display: flex;
    background-color: #f2f2f2;
    padding: 2rem;
    justify-content: center;
    text-align: center;
}
#what .what-container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    overflow: hidden;
}


#what .what-container .items-parent{
    display: flex;
    /* justify-content: space-around; */
    padding: 1rem;
    
}
#what .items-parent .item{
   flex: 1;
   /* 让每个元素之间一点距离 */
   padding: 1rem;
   text-align: center;
} 
#what .items-parent .item i{
    background-color: #93cb52;
    padding: 1rem;
    border-radius: 50%;
}
#what .items-parent .item h3{
    
    padding: 1rem;
   
}
 
 #what py-1{
    padding: 1.5rem 0;
 }

 /* who we are */
 #who{
    display: flex;
 }
 #who div{
    /* 高图片和文字各占一半 */
    flex: 1;
 }
 #who .who-img{
    /* 设置图片的样式 */
    background: url("../img/whoWeAre.jpg") no-repeat center center/ cover;
 }
 #who .who-text{
    padding: 1rem;
 }
 #who .who-text li {
    padding: 0.5rem 0;
    border-bottom: #838581 dotted 1px;
 }

 /* clients */
 #clients .items-parent{
    display: flex;
    padding: 2rem;
    justify-content: center;
    
 }
 #clients .items-parent div {
    /* 让每个元素之间一点距离 */
    padding: 1rem;
 }
 #clients .items-parent img{
    /* display: block;
    margin: 0 auto;好像没用， */
    display: block;
    margin: 0 auto;
    max-width: 60%;
    
 }

 /* section:contact */
 #contact{
    display: flex;
 }
 #contact .contact-form,
 #contact .contact-img{
    flex: 1;
 }
 #contact .contact-img{
    background: url("../img/contact.jpg") no-repeat center center/ cover;
 }
 #contact .contact-form .form-group{
    margin: 1.5rem;

 }
 #contact .form-group label{
    /* 这样使名字和输入框各占一行 */
    /* display: block; */
 }
 #contact .form-group input,
 #contact .form-group textarea{
    width: 100%;
    padding: 0.5rem;
    border-radius: 5px;
    
 }
 .btnsub{
    width: 90%;
    padding: 0.5rem;
    border-radius: 5px;
    margin: 20px;

 }
